<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="./cactbot/common.js?v=1"></script>
	<script src="./common.js?v=5"></script>
	<script src="./vue.min.js"></script>
	<title>Ccino dps</title>
	<link href="./index.css?v=7" rel="stylesheet" />
</head>
<body class="noselect">
	<div id="container" :style="{fontSize:option.fontSize+'px', 'background-color':option.colors.background, 'font-family':option.fontFamily.all}" v-cloak>
		<div id="resizer" v-if="resizable"></div>
		<div class="title" @dblclick="openSetting">
			<span id="title-left">
				<span v-if="!encounter.title">
					暂无数据 <span v-if="!option._knownSetting">(双击打开设置页面)</span>
				</span>
				<template v-else>
					<!-- <span v-if="isActive">*</span> -->
					<span>
						{{encounter.CurrentZoneName}} - {{encounter.duration}}
					</span>
				</template>

				<span class="circle hover-scale" @click="mini"></span>
				
				
			</span>

			<span>
				<span :class="{'at-right-nextline':titleNextLine,
							'at-right':!titleNextLine}" >
					<span id="title-right">
						<template v-if="option.series.length>1">
							<span class="series-names" v-for="series,i in option.series" @click="changeDataType(i)"
							:class="{'active-series':currentSeries==series}">
								{{series.name}}
							</span>
						</template>
						<span v-show="encounter.title">
							<span v-if="myDps" ># {{myOrder}} &nbsp; {{myDps|round}} / </span>
							{{encounter.dps|round}}
						</span>
					</span>
				</span>
			</span>
		</div>
		<div v-show="!miniStyle">
			<div class="title-border"></div>

			<ul v-if="showColumnHeader" style="font-weight: bold;">
				<li style="flex: 0 0 1.5em;"></li>
				<li :style="{flex: '0 0 '+(currentSeries.nameColumnWidth||option.nameColumnWidth)+'%'}"></li>
				<li v-for="column in currentSeries.columns" 
					:style="{textAlign:column.textAlign||'left',
						flex:column.size?('0 0 '+column.size+'%'):('auto')}">
					<template>{{column.name}}</template>
				</li>
			</ul>
			<div is="transition-group" :name="option.animationOff?'':'flip-list'">
				<ul v-for="c in combatants" :key="c.name">
					<li style="flex: 0 0 1.5em;" >
						<img class="job-img" 
						:src="'./icons/'+(c.Job||'Err')+'.png'" 
						onerror="this.style.opacity='0'"/>
						<div class="filler" :class="{'filler-fill':option.dataBarStyle=='fill',
													'filler-line':option.dataBarStyle=='line'}" :style="{width: getPercentWidth(c) + '%', 
							backgroundColor:getJobColor(c.Job),
						    height:dataBarHeight}"></div>
					</li>
					<li :style="{flex: '0 0 '+(currentSeries.nameColumnWidth||option.nameColumnWidth)+'%','font-family':option.fontFamily.name}" :class="{'hidden-text':option.hiddenOthers&&c.name!='YOU'}">
						{{c.name}}
					</li>
					<li v-for="column in currentSeries.columns" 
						:style="{textAlign:column.textAlign||'left',
								flex:column.size?('0 0 '+column.size+'%'):('auto'),
								'font-family':option.fontFamily.data}">
						<template>{{column.prefix}}</template>
						<template v-if="column.round">{{c[column.value] | round}}</template>
						<template v-else>{{c[column.value]}}</template>
						<template>{{column.suffix}}</template>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<script src="./index.js?v=7.6"></script>
</body>
</html>